<template>
    <div class="rs-home-page">
        <div class="markdown-body" v-html="source"></div>
        <!-- <el-button type="primary" @click="handleClick">授权信息</el-button>
        <el-button type="primary" @click="handleExClick">访问异常</el-button>
        <el-button type="primary" @click="handleNoHandleClick">NoHandle</el-button>
        <el-button type="primary" @click="handleNoMethodClick">NoMethod</el-button>
        <el-button type="primary" @click="handleForbiddenClick">Forbidden</el-button>
        <div class="icon-picker">
            <RsIconPicker :icons="icons" v-model="icon"></RsIconPicker>
            <el-color-picker v-model="color2"></el-color-picker>
            <el-select v-model="optionValue" placeholder="请选择" clearable>
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            <RsTreeEdit clearable v-model="treeValue" nodeKey="cdbh" :width="250" :defaultProps="defaultProps" :items="items"></RsTreeEdit>
        </div>
        <div class="split-container">
        </div>
        <RsDlgTest ref="dlg"></RsDlgTest>
        <RsDict v-model="dictValue" dict="roleType" clearable></RsDict> -->
        <!-- <VueMarkdown :source="source"></VueMarkdown> -->
        <!-- {{source}} --> 
        <!-- <mavon-editor class="md" v-html="source" :subfield="false" :toolbarsFlag="false" :boxShadow="false" :ishljs="true" /> -->
    </div>
    <!-- <rs-split type="vertical" :minSize="300" fixed >
        <div slot="first" class="first-panel" ></div>
        <div slot="last" class="last-panel">
            <rs-split type="horizontal">
                <div slot="first" class="first-panel"></div>
                <div slot="last" class="last-panel">
                    
                </div>
            </rs-split>
        </div>
    </rs-split> -->
</template>
<style lang="scss">
.first-panel{
    width: 100%;
    height: 100%;
    //background: rosybrown;
}
.last-panel{
    width: 100%;
    height: 100%;
    //background: royalblue;
}
.icon-picker{
    position: relative;
    padding: 10px;
    vertical-align: middle;
    border:solid 1px #ccc;
    margin-top: 20px;

    .rs-icons-picker,
    .el-color-picker{
        vertical-align: middle;
    }
    .rs-icons-picker + .el-color-picker{
        margin-left: 10px;
    }
}
.el-color-picker{
    //vertical-align: middle;
}
</style>
<script>
import RsDlgTest from './RsDlgTest'
import icons from '@/utils/icons.js'
import JSEncrypt from '@/utils/jsencrypt.js'
import VueMarkdown from 'vue-markdown'
import RSUI from '@/../RsUI.md'
export default {
    name:'HomePage',
    components:{RsDlgTest,VueMarkdown},
    data(){
        return{
            dictValue:'0',
            rsDlgTestVisible:false,
            treeValue:'25',
            defaultProps: {
                children: 'menus',
                label: 'cdmc',
                isLeaf: 'leaf'
            },
            items:[
                {cdbh:'0',cdmc:'菜单一',menus:[
                    {cdbh:'01',cdmc:'菜单一1'},
                    {cdbh:'02',cdmc:'菜单一2'},
                    {cdbh:'03',cdmc:'菜单一3'},
                    {cdbh:'04',cdmc:'菜单一4'},
                    {cdbh:'05',cdmc:'菜单一5'},
                ]},
                {cdbh:'1',cdmc:'菜单二',menus:[
                    {cdbh:'11',cdmc:'菜单二1'},
                    {cdbh:'12',cdmc:'菜单二2'},
                    {cdbh:'13',cdmc:'菜单二3'},
                    {cdbh:'14',cdmc:'菜单二4'},
                    {cdbh:'15',cdmc:'菜单二5'},
                ]},
                {cdbh:'2',cdmc:'菜单三',menus:[
                    {cdbh:'21',cdmc:'菜单三1'},
                    {cdbh:'22',cdmc:'菜单三2'},
                    {cdbh:'23',cdmc:'菜单三3'},
                    {cdbh:'24',cdmc:'菜单三4'},
                    {cdbh:'25',cdmc:'菜单三5'},
                ]},
                {cdbh:'3',cdmc:'菜单四'},
                {cdbh:'4',cdmc:'菜单五'},
            ],
            color2:'',
            icons:icons,
            icon:'rs-icon-setting',
            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            } ,{
                value: '选项20',
                label: '双皮奶'
            }, {
                value: '选项30',
                label: '蚵仔煎'
            }, {
                value: '选项40',
                label: '龙须面'
            }, {
                value: '选项50',
                label: '北京烤鸭'
            }],
            optionValue:'',
            source:''
        }
    },
    created(){
        //console.log(vue)
        this.source = RSUI;
    },
    methods:{
        onSelectIcon(icon){
            console.log(icon)
        },
        handleClick(){
            //this.dictValue = "1"
            // this.$refs.dlg.show({param:'param'})
            // .then((action)=>{
            //     console.log(action)
            // })
            // this.rsDlgTestVisible= true;
            this.$req({
                url: "/auth/info",
                method: 'post'
            })
            .then(response => {
                this.loading = false;
                const { data } = response;
                //console.log(data) 
                
            }).catch(error => {
                this.loading = false;
                this.showError('网络错误，获取授权信息失败！');
            });
        },
        handleExClick(){
            this.$req({
                url: "/auth/info0",
                method: 'post'
            })
            .then(response => {
                this.loading = false;
                const { data } = response;
                console.log(data)
                
            }).catch(error => {
                this.loading = false;
                this.showError('网络错误，获取授权信息失败！');
            });
        },
        handleNoHandleClick(){
            this.$req({
                url: "/auth/info01",
                method: 'post'
            })
            .then(response => {
                this.loading = false;
                const { data } = response;
                console.log(data)
                
            }).catch(error => {
                this.loading = false;
                this.showError('网络错误，获取授权信息失败！');
            });
        },
        handleNoMethodClick(){
            this.$req({
                url: "/auth/info1",
                method: 'post'
            })
            .then(response => {
                this.loading = false;
                const { data } = response;
                console.log(data)
                
            }).catch(error => {
                this.loading = false;
                this.showError('网络错误，获取授权信息失败！');
            });
        },
        handleForbiddenClick(){
            // this.$req({
            //     url: "/auth/test",
            //     method: 'post'
            // })
            // .then(response => {
            //     this.loading = false;
            //     const { data } = response;
            //     console.log(data)
                
            // }).catch(error => {
            //     this.loading = false;
            //     this.showError('网络错误，获取授权信息失败！');
            // });
            const publicKey = "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAvxhqLKomPUbhAAA2tw1XEEWmQW/i+xHOvVtctNE6e3jhKgqOf7x8ZfzjLzPbU+gzuC8425gzwLAD3FK9mVo3iMgHhmYUabE5sAnkUngjqBgv5NKSAfsIU50AiyZOsQgPEymlsowjAJmL1HqorGFSDy3z5p+bqsWkLm7lm25hEgOT6Sctf8lxky8wjX115NqhbBEP/jpKATHRrBt/8oH8XXpHebee9x8/v4tu/fk5MtXcu5sG4NcfupkaodfchPqUafPWYk6gONEjJSe2qub93KzF+JtEJ9y2aSNROhAA+6+v0uh9vADnIfb6vkLvOs/76NgJ6kjpb8wtSl8+Z+ZwywIDAQAB";
            //const modulus = "96694757bf389e72da8b635d5c8a585495f4fc6cf4faad1d28d7fce4e3c1c001a2f84e9d136f8fca15c565b50fc9fd87109bc7923af7c41df1f7bede9244f3b6e6e86c881dd74b7b8b22c29c5d30067aedf20e906119c1e4657431414bf9614109a31069b77dae39521c275751f5ff6cde3293fb434598abc890ea5bd8e49eb3";
            //const exponent = "10001";
            // const key = new RSAKeyPair(exponent, "", modulus);
            // const pwd = encryptedString(key,"admin你好");
            var plainText = "";
            for( var i = 0; i < 128; i ++ ){
                plainText += '0';
            }
            plainText += '中国';
            var jse = new JSEncrypt();
            jse.setPublicKey(publicKey);
            //jse.getKey().setPublic(modulus,exponent);
            var encrypted = jse.encrypt(plainText);
            console.log(encrypted)
        },
        showError( text ){
            this.$message({
                showClose: false,
                message: text,
                type: 'error',
                customClass:'login-tips',
                duration:2000
            });
        },
    }
}
</script>